<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        #demo {
            width: 100%;
            height: 480px;
            transition: 0.5s;
            background: url(img/616a99f8ede46b1b60896cc5f05f4f90.jpg) center;
        }
    </style>
</head>

<body>
    <div id="demo"></div>
    <script>
        var demo = document.getElementById("demo")

        var arr = [
            "616a99f8ede46b1b60896cc5f05f4f90.jpg",
            "64946b83e53309c3e0e300f340703271.jpg",
            "c8ee011e420bac56d1bcdf5e452a712d.jpg",
            "f8307b98884912892eaa8e9c6e4fbcd4.jpg"
        ]
        var i = 0
        setInterval(function () {
            if (++i === arr.length) i = 0
            demo.style["background-image"] = `url(img/${arr[i]})`
        }, 2000)



        // demo.innerHTML = "<h1>Simba</h1>"
        // demo.innerText = "<h1>Simba</h1>"

        // var a = document.getElementsByClassName("a")
        // for (let i = 0; i < a.length; i++) {
        //     a[i].style.color = "red"
        // }

        // var div = document.getElementsByTagName("div")[0]
        // div.innerHTML = "Ace"

        //1000毫秒后执行fn
        // var timer = setTimeout(function () {
        //     document.body.style.backgroundColor = "red"
        // }, 1000)

        // clearTimeout(timer)

        //每隔1000毫秒执行fn
        // var i = 0
        // var timer1 = setInterval(function () {
        //     var h1 = document.createElement("h1")
        //     h1.innerHTML = "Simba"
        //     document.body.append(h1)
        //     i++
        //     if (i === 5) clearInterval(timer1)
        // }, 2000)
    </script>
</body>

</html>